@* SentimentBar Template File *@
@(table: String)
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="twitter:widgets:theme" content="light">
  <meta name="twitter:widgets:link-color" content="#55acee">
  <meta name="twitter:widgets:border-color" content="#55acee">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src='@routes.Assets.at("lib/d3js/d3.min.js")'></script>
  <script type="text/javascript" src='@routes.Assets.at("lib/jquery/jquery.min.js")'></script>
  <script type='text/javascript' src='@routes.Assets.at("javascripts/d3-tip.js")'></script>
  <script type="text/javascript" src='@routes.Assets.at("lib/coffee-script/coffee-script.min.js")'></script>
  <script type="text/javascript" src='@routes.Assets.at("coffeescripts/sentiment-bar.js")'></script>
  <link rel="stylesheet" href='@routes.Assets.at("css/sentiment.css")'>
  <title>Sentiment Charts</title>
</head>

<body>
  <div class="charts--container">
    <ul>
      <li class="chart">
        <h2 class="chart--headline">Tweets Sentiment Pie</h2>
        <div id="pieChart">
          <svg>
            <defs>
              <filter id='pieChartInsetShadow'>
                <feOffset dx='0' dy='0'/>
                <feGaussianBlur stdDeviation='3' result='offset-blur' />
                <feComposite operator='out' in='SourceGraphic' in2='offset-blur' result='inverse' />
                <feFlood flood-color='black' flood-opacity='1' result='color' />
                <feComposite operator='in' in='color' in2='inverse' result='shadow' />
                <feComposite operator='over' in='shadow' in2='SourceGraphic' />
              </filter>
              <filter id="pieChartDropShadow">
                <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
                <feOffset in="blur" dx="0" dy="3" result="offsetBlur" />
                <feMerge>
                  <feMergeNode />
                  <feMergeNode in="SourceGraphic" />
                </feMerge>
              </filter>
            </defs>
            <g id="pieChartSVG"></g>
          </svg>
        </div>
      </li>
      <li class="chart">
        <h2 class="chart--headline">Tweets Bar Chart</h2>
        <svg class="seriesGraph"></svg>
      </li>
      <li class="chart">
        <!--  <h2 class="chart--headline">Recent Tweets List</h2> -->
        <div id="lineChart">
          <div class="wrapper" id="wrapper0"><h3>Positive Tweets</h3></div>
          <div class="wrapper" id="wrapper1"><h3>Negative Tweets</h3></div>
        </div>
      </li>
    </ul>
  </div>
  <script type='text/coffeescript'>
     twttr.events.bind('loaded', (event) ->
       d3.selectAll(".rendered-twitter-div").remove()
       d3.selectAll(".rendering-twitter-div")
         .style("visible", "true")
         .attr("class", "rendered-twitter-div")
       setTimeout(d3.json, 5000, dataUrl, callback)
     )

     dataUrl = '@com.htc.studio.demo.routes.Application.h2Sentiment(table, "ID", "TWEET", "SENTIMENT")'
     callback = (error, json) -> SentimentPie(json)
     d3.json(dataUrl, callback)
  </script>
  <script type='text/javascript' src='@routes.Assets.at("javascripts/widgets.js")'></script>
</body>
</html>
